<template>
	<view class="header">

		<!-- #ifndef MP-BAIDU -->
		<!-- 绝对定位返回 -->
		<view class="" style=" position: absolute; z-index: 100;">
			<view :style="{ height: statusBarHeight + 'px'}"></view>
			<view :style="{ height: navigationBarHeight + 'px'}" @click="onback" class="navigation"
				style="background-color: rgba(255, 255, 255, 0);">
				<view class="hover-btn">
					<view class="t-icon iconfont icon-zuojiantou" style="">
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="" style="height: 0; position: relative;">
			<view @click="onback" class="" style="background-color:#000; 
			border-radius: 20rpx;
			opacity: 0.5;  
			height:60rpx; 
			display: flex;
			justify-content: center;
			line-height: 60rpx;
			color: #fff;
			text-align: center;
			font-weight: bold;
			z-index: 1000; 
			position: absolute;
			width: 80rpx;
			margin-left: 30rpx;" :style="{'top':(navigationBarHeight-30)/2+statusBarHeight+'px'}">
				<view class="t-icon iconfont icon-zuojiantou">
				</view>
			</view>
		</view> -->
		<!-- #endif -->

		<!-- #ifdef MP-BAIDU -->
		<view class="" style=" position: absolute; z-index: 100;">
			<view :style="{ height: statusBarHeight + 'px'}"></view>
			<view :style="{ height: navigationBarHeight + 'px'}" class="navigation"
				style="background-color: rgba(255, 255, 255, 0);">
				<view class="hover-btn"></view>
			</view>
		</view>

		<!-- <view :style="{ height: statusBarHeight + 'px'}" class="stat" style="background-color: #fff;"></view>
		<view :style="{ height: navigationBarHeight + 'px'}" class="navigation" style="background-color: #fff;">
			<view  class="back">
				<view class="t-icon " style="padding-right: 14rpx;"></view>
			</view>
			<view class="title">
				{{title}}
			</view>
		</view> -->
		<!-- #endif -->





		<!-- 悬浮标题 -->
		<view :animation="animationData" class="nav-top">
			<!-- 状态栏 -->
			<view :style="{ height: statusBarHeight + 'px'}" class="stat" style="background-color: #fff;"></view>

			<!-- 标题栏 -->
			<view :style="{ height: navigationBarHeight + 'px'}" class="navigation" style="background-color: #fff;">
				<!-- #ifndef MP-BAIDU -->
				<view @click="onback" class="back">
					<view class="t-icon iconfont icon-zuojiantou" style="color: #2a2a2a;"></view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-BAIDU -->
				<view @ class="back">
					<view class="t-icon " style="padding-right: 14rpx;"></view>
				</view>
				<!-- #endif -->
				<view class="title">
					{{title}}
				</view>
			</view>

			<view class="nav">
				<text @click="toSkip(1)" :class="ids==1?'name active':'name'">商品</text>
				<text @click="toSkip(2)" :class="ids==2?'name active':'name'">团期</text>
				<!-- <text @click="toSkip(3)" :class="id==3?'name active':'name'">费用</text> -->
				<view class="" style="flex: 1; height: 100%;  box-sizing: border-box;">
					<view class="price">
						<text class="small">￥</text> <text>{{price}}</text> <text class="small">起</text>
					</view>
				</view>
				<text @click="toSkip(3)" :class="ids==3?'name active':'name'">详情</text>
				<text @click="toSkip(4)" :class="ids==4?'name active':'name'">推荐</text>
				<!-- <uni-icons @click="toGoods()" type="phone" size="24" color="#fff"></uni-icons> -->
			</view>
		</view>

	</view>

</template>

<script>
	import {
		debounce,
		navTo
	} from '@/common/hint.js'
	export default {
		props: {
			title: {
				type: String
			},
			price: {
				type: [Number, String]
			},
			ids: {
				type: [Number, String]
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navigationBarHeight: 0,
				animationData: {},
				animation: '',
			}
		},
		mounted() {
			// #ifndef MP-BAIDU
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.navigationBarHeight = getApp().globalData.navigationBarHeight
			// #endif
			// 百度小程序调用百度api获取状态栏高度
			// #ifdef MP-BAIDU
			this.statusBarHeight = swan.getSystemInfoSync().statusBarHeight
			this.navigationBarHeight = swan.getSystemInfoSync().navigationBarHeight
			// #endif

			// 定义动画
			this.animation = uni.createAnimation({
				// 动画持续时间
				duration: 1000,
				// 动画加速度
				timingFunction: 'ease',
			})

			// 监听页面滚动
			var that = this
			uni.$on('onPageScroll', function(data) {
				if (data >= 150) {
					that.opacity(1)
				} else {
					that.opacity(0)
				}
			})
		},
		methods: {
			opacity(a) {
				this.animation.opacity(a).step()
				this.animationData = this.animation.export()
			},
			toSkip(id) {
				this.$emit('toSkip', id)
			},
			onback: debounce(function() {
				const pages = getCurrentPages()
				// 有可返回的页面则直接返回，uni.navigateBack  默认返回失败之后会自动刷新页面 ，无法继续返回
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1,
						fail: (res) => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
					return;
				}
				// 如果用户刷新网页导致页面返回失败,退回首页
				uni.switchTab({
					url: '/pages/index/index'
				})
				return;
			}),
			navTo() {
				navTo
			},

		}
	}
</script>
<style lang="scss" scoped>
	.nav-top {
		border-bottom: 2rpx solid #dcdcdc;
		background: #FFF;
		height: 80rpx;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		z-index: 99;
		background-color: #fff;
		//border-bottom: 1rpx solid #dcdcdc;
	}

	.price {
		width: 160rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		text-align: center;
		margin: auto;
		margin-top: 16rpx;
		color: #FF5454;
		border: 2rpx solid #FFB4B4;
		border-radius: 40rpx;

		.small {
			font-size: 22rpx;
		}

		// background-color: pink;
		// border-radius: 50%;
	}

	.stat {
		background-color: #FFF;
		//position: fixed;
		//z-index: 1;
		height: var(--status-bar-height); // --status-bar-height系统状态栏高度
		width: 100%;
		//top: 0;
		//left: 0;
	}

	.navigation {
		background-color: #fff;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.back {
		padding-left: 20rpx;
		font-weight: bold;

		.t-icon {
			font-size: 40rpx;
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #000;
		}
	}

	.title {
		//display: flex;
		//align-items: center;
		//justify-content: center;
		font-size: 30rpx;
		// text-overflow: ellipsis;
		padding-right: 200rpx;
		height: 40rpx;
		// line-height: 80rpx;
		// overflow: hidden; 
		/* 文本超出省略号 */
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏溢出部分 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.nav {
		display: flex;
		border-top: 2rpx solid #f9f9f9;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 80rpx;
		// padding: 0 28rpx;
		box-sizing: border-box;
		background-color: #fff;

		.active {
			color: #108cff !important;
		}


	}

	.name {
		width: 140rpx;
		color: #444444;
		text-align: center;
		// margin-right: 30rpx;
	}

	.name:last-child {
		// margin-right: 0;
	}

	.hover-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 60rpx;
		font-size: 20rpx;
		color: #fff;
		font-weight: bold;
		margin-left: 18rpx;
		background-color: #000;
		opacity: 0.5;
		border-radius: 20rpx;
	}
</style>